<template>
    <div class="modal fade" id="search_user" tabindex="-1" role="dialog"
         aria-labelledby="search_user">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="searchFor_box">
                        <div class="g-form-line">
                            <div class="searchFor_left">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">
                                            <img src="../../assets/images/home_image/close.png" alt="" class="closeBtn">
                                        </span>
                                </button>
                                <p>搜客户</p>
                            </div>
                            <div class="searchFor_right">
                                <p class="top_text">搜索到客户名为 {{ userData.userNickname }} 的 1 条记录:</p>
                                <table class="table_top">
                                    <thead>
                                    <tr class="table_nav">
                                        <th class="clientsName">客户名称</th>
                                        <th class="loginAccount">登录账号</th>
                                        <th class="contact">联系人</th>
                                        <th class="phone">电话</th>
                                        <th class="operating">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr class="table_content">
                                        <td class="clientsName">{{ userData.userNickname }}</td>
                                        <td class="loginAccount">{{ userData.userEmail }}</td>
                                        <td class="contact">{{ userData.linkman}}</td>
                                        <td class="phone">{{ userData.dealerPhone }}</td>
                                        <td class="operating">
                                            <span @click="showCustomer">查看</span>|
                                            <span @click="showPosition">定位监控</span>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                userData: {}
            }
        },
        methods: {
            getData (data) {
                this.userData = data
            },
            showCustomer () {
                let timer = setTimeout(() => {
                    clearTimeout(timer)
                    let time = setTimeout(() => {
                        clearTimeout(time)
                        this.$emit('showUser', this.userData)
                    }, 100)
                    $('#search_user').modal('hide')
                }, 100)
            },
            showPosition () {
                let timer = setTimeout(() => {
                    clearTimeout(timer)
                    let time = setTimeout(() => {
                        clearTimeout(time)
                        this.$router.push({path: '/monitoring'})
                        this.$store.commit('setPositionUser', this.userData)
                    }, 300)
                    $('#search_user').modal('hide')
                }, 100)
            }
        }
    }
</script>


<style scoped>
    .modal-content {
        width: 750px;
        height: 540px;
    }

    .modal-body {
        padding: 0;
    }

    /* 弹窗左侧设置 */
    .searchFor_left {
        position: relative;
        width: 180px;
        height: 540px;
        background: #263238;
        float: left;
    }

    .closeBtn {
        position: absolute;
        left: 15px;
        top: 10px;
    }

    .searchFor_left p {
        position: absolute;
        color: rgb(23, 210, 156);
        top: 260px;
        left: 65px;
        font-size: 14px;
    }

    /* 弹窗右侧设置 */
    .searchFor_right {
        position: relative;
        width: 570px;
        height: 540px;
        margin-left: 202px;
    }

    table {
        font-size: 12px;
    }

    .top_text {
        padding-top: 35px;
        font-size: 12px;
        color: rgb(153, 153, 153)
    }

    /* 顶部表格 */

    .table_top {
        width: 526px;
        padding-top: 45px;
        margin-top: 8px;
    }

    .table_top .clientsName {
        width: 70px;
        text-align: center;
    }

    .table_top .loginAccount {
        width: 70px;
        text-align: center;
    }

    .table_top .contact {
        width: 80px;
        text-align: center;
    }

    .table_top .phone {
        width: 90px;
        text-align: center;
    }

    .table_top .operating {
        width: 90px;
        text-align: center;
    }

    .table_nav {
        width: 526px;
        height: 30px;
        background: rgb(240, 240, 240);
        color: rgb(153, 153, 153);
        font-size: 12px;
        text-align: center;
    }

    .table_content {
        color: rgb(102, 102, 102);
    }

    .table_content td {
        height: 40px;
        line-height: 40px;
    }

    .table_content td span {
        cursor: pointer;
    }
</style>
